<template>
<!-- 订单填写完成后进入支付页 -->
<!-- 列出支持的支付方式 -->
<view class="pay">
  <view class="money">
    <text>￥</text>
    <text class="number">{{ state.order.pay.actualPay }}</text>
  </view>
  <scroll-view class="pay-channel" scrll-y="true" :style="{height: (windowHeight - 44 - 43 - 50) + 'px'}">
    <uni-section sub-title="支付方式">
      <template v-slot:decoration>
        <view class="decoration"></view>
      </template>
      <view class="list">
        <view class="item" @tap="selectPayChannel(payIdx)" :class="payIdx === state.auxiliary.activePayIdx ? 'item-active' : ''" v-for="(payItem, payIdx) in state.payChannel" :key="payIdx">
          <view class="icon">
            <uni-icons custom-prefix="iconfont" :color="payItem.icon.color" :type="payItem.icon.type" size="30"></uni-icons>
          </view>
          <view><text class="pay-name">{{ payItem.label }}</text></view>
        </view>
      </view>
    </uni-section>
  </scroll-view>

  <view class="btn-grp">
    <view class="btn-item"><button size="mini">取消订单</button></view>
    <view class="btn-item"><button size="mini" type="warn" @tap="confirmToPay">立即支付</button></view>
  </view>
</view>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {getOrderPayInfo, payOrder} from "@/services/order";
import type {OrderPayInfoType} from "@/types/order";

const {windowHeight} = uni.getSystemInfoSync()

const state =ref({
  order: {
    number: "",
    pay: {
      actualPay: 0,
      preferPayChannel: "ALP"
    }as OrderPayInfoType
  },
  payChannel: [
    {label: "支付宝", value: "ZFB", icon: {type: "icon-zhifubaozhifu", color: "#009fe8"}},
    {label: "微信支付", value: "WECHAT_PAY", icon: {type: "icon-weixinzhifu", color: "#24b340"}},
    {label: "云闪付", value: "YSF", icon: {type: "icon-yunshanfu", color: "#fd2821"}},
  ],
  auxiliary: {
    activePayIdx: -1
  }
})

const selectPayChannel = (idx: number) => {
  state.value.auxiliary.activePayIdx = idx
}

const getPayInfo = (number: string) => {
  getOrderPayInfo(number).then((r) => {
    if (r.code === 0) {
      state.value.order.pay = r.data
      selectPreferPayChannel(state.value.order.pay.preferPayChannel)
    } else {
      uni.showToast({
        title: r.msg,
        icon: "none"
      })
    }

  }).catch(() => {})
}

const selectPreferPayChannel = (channel: string) => {
  for (let i = 0; i < state.value.payChannel.length; i++) {
    if (state.value.payChannel[i].value === channel) {
      selectPayChannel(i)
      break
    }
  }
}

const confirmToPay = () => {
  payOrder(state.value.order.number).then((r) => {
    if (r.code === 0) {
      uni.showToast({
        title: "完成支付",
        icon: "none"
      })
      // 返回一个完成结算的页面
      uni.navigateTo({
        url: "/pagesOrder/settings/afterpay"
      })
    } else {
      uni.showToast({
        title: r.msg,
        icon: "none"
      })
    }
  }).catch(()=>{})

}
onLoad((params: any) => {
  console.log("@pay params: ", params)
  state.value.order.number = params.number
  getPayInfo(params.number)
})
</script>
<style lang="scss">
.pay {
  .money {
    padding: 10px 0;
    height: 30%;
    color: $uni-color-error;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    .number {
      font-size: 20px;
    }
  }
  .pay-channel {
    .list {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .item {
        display: flex;
        align-items: center;
        padding: 5px 20px;
        .pay-name {
          margin-left: 10px;
        }
      }
      .item-active{
        background-color: #fad8d6;
      }
    }
  }
  .btn-grp {
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #ffffff;
    .btn-item {
      margin-right: 10px;
    }
  }
}
.decoration{
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background-color: $uni-color-success;
}
</style>